<div class="content-section introduction">
    <div>
        <span class="feature-title">FileUpload</span>
        <span>FileUpload is an advanced uploader with dragdrop support, multi file uploads, auto uploading, progress tracking and
            validations.</span>
    </div>
</div>

<div class="content-section implementation">
    <p-growl [value]="msgs"></p-growl>
        
    <h3 class="first">Advanced</h3>
    <p-fileUpload name="demo[]" url="./upload.php" (onUpload)="onUpload($event)" 
            multiple="multiple" accept="image/*" maxFileSize="1000000"> 
            <ng-template pTemplate="content">
                <ul *ngIf="uploadedFiles.length">
                    <li *ngFor="let file of uploadedFiles">{{file.name}} - {{file.size}} bytes</li>
                </ul>
            </ng-template>    
    </p-fileUpload>
    
    <h3>Basic</h3>
    <p-fileUpload mode="basic" name="demo[]" url="./upload.php" accept="image/*" maxFileSize="1000000" (onUpload)="onBasicUpload($event)"></p-fileUpload>
    
    <h3>Basic with Auto</h3>
    <p-fileUpload #fubauto mode="basic" name="demo[]" url="./upload.php" accept="image/*" maxFileSize="1000000" (onUpload)="onBasicUploadAuto($event)" auto="true" chooseLabel="Browse"></p-fileUpload>
</div>

<div class="content-section documentation">
    <p-tabView effect="fade">
        <p-tabPanel header="Documentation">
            <h3>Import</h3>
<pre>
<code class="language-typescript" pCode ngNonBindable>
import &#123;FileUploadModule&#125; from 'primeng/primeng';
</code>
</pre>

            <h3>Getting Started</h3>
            <p>FileUpload requires a url property as the upload target and a name to identify the files at backend.</p>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-fileUpload name="myfile[]" url="./upload.php"&gt;&lt;/p-fileUpload&gt;
</code>
</pre>

            <h3>Multiple Uploads</h3>
            <p>Only one file can be selected at a time, to allow selecting multiples enable multiple option.</p>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-fileUpload name="myfile[]" url="./upload.php" multiple="multiple"&gt;&lt;/p-fileUpload&gt;
</code>
</pre>

            <h3>DragDrop</h3>
            <p>File selection can also be done by dragging and dropping one or more to the content section of the component.</p>
            
            <h3>Auto Uploads</h3>
            <p>When auto property is enabled, upload begins as soon as file selection is completed or a file is dropped on the drop area.</p>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-fileUpload name="myfile[]" url="./upload.php" multiple="multiple"
        accept="image/*" auto="auto"&gt;&lt;/p-fileUpload&gt;
</code>
</pre>

            <h3>File Types</h3>
            <p>Selectable file types can be restricted with accept property, example below only allows images to be uploaded.
            Read more about other possible values <a href="http://www.w3schools.com/tags/att_input_accept.asp">here</a>.</p>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-fileUpload name="myfile[]" url="./upload.php" multiple="multiple"
        accept="image/*"&gt;&lt;/p-fileUpload&gt;
</code>
</pre>

            <h3>File Size</h3>
            <p>Maximium file size can be restricted using maxFileSize property defined in bytes.</p>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-fileUpload name="myfile[]" url="./upload.php" multiple="multiple"
        accept="image/*" maxFileSize="1000000"&gt;&lt;/p-fileUpload&gt;
</code>
</pre>

            <p>In order to customize the default messages use invalidFileSizeMessageSummary and invalidFileSizeMessageDetail options. 
            In summary &#123;0&#125; placeholder refers to the filename and in detail, file size.</p>
            <ul>
                <li>invalidFileSizeMessageSummary: '&#123;0&#125;: Invalid file size, '</li>
                <li>invalidFileSizeMessageDetail: string = 'maximum upload size is &#123;0&#125;.'</li>
            </ul>
            
            <h3>Templating</h3>
            <p>File list UI is customizable using a ng-template called "file" that gets the <a href="https://www.w3.org/TR/FileAPI/">File</a> instance as the implicit variable.
                Second ng-template named "content" can be used to place custom content inside the content section which would be useful to implement a user interface to manage the uploaded files such as removing them.  
                Third and final ng-template option is "toolbar" to display custom content at toolbar.</p>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-fileUpload name="myfile[]" url="./upload.php" multiple="multiple"
        accept="image/*" maxFileSize="1000000"&gt;
        &lt;ng-template pTemplate="toolbar"&gt;
            &lt;div&gt;Upload 3 Files&lt;/div&gt;
        &lt;/ng-template&gt;  
        &lt;ng-template let-file pTemplate="file"&gt;
            &lt;div&gt;Custom UI to display a file&lt;/div&gt;
        &lt;/ng-template&gt; 
        &lt;ng-template pTemplate="content"&gt;
            &lt;div&gt;Custom UI to manage uploaded files&lt;/div&gt;
        &lt;/ng-template&gt;  
&lt;/p-fileUpload&gt;
</code>
</pre>

            <h3>Request Customization</h3>
            <p>XHR request to upload the files can be customized using the onBeforeUpload callback that passes
                the xhr instance and FormData object as event parameters.</p>
                
            <h3>Basic UI</h3>
            <p>FileUpload basic mode provides a simpler UI as an alternative to advanced mode.</p>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-fileUpload mode="basic" name="demo[]" url="./upload.php" accept="image/*" maxFileSize="1000000" (onUpload)="onBasicUpload($event)" auto="true"&gt;&lt;/p-fileUpload&gt;
</code>
</pre>
            <h3>Custom Upload</h3>
            <p>Uploading implementation can be overriden by enabling customMode property and defining a custom upload handler event.</p>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-fileUpload name="myfile[]" customUpload="true" (uploadHandler)="myUploader($event)"&gt;&lt;/p-fileUpload&gt;
</code>
</pre>

<pre>
<code class="language-typescript" pCode ngNonBindable>
myUploader(event) &#123;
    //event.files == files to upload
&#125;
</code>
</pre>
            
            <h3>Properties</h3>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Type</th>
                            <th>Default</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>name</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Name of the request parameter to identify the files at backend.</td>
                        </tr>
                        <tr>
                            <td>url</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Remote url to upload the files.</td>
                        </tr>
                        <tr>
                            <td>method</td>
                            <td>string</td>
                            <td>POST</td>
                            <td>HTTP method to send the files to the url.</td>
                        </tr>
                        <tr>
                            <td>multiple</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>Used to select multiple files at once from file dialog.</td>
                        </tr>
                        <tr>
                            <td>accept</td>
                            <td>string</td>
                            <td>false</td>
                            <td>Pattern to restrict the allowed file types such as "image/*".</td>
                        </tr>
                        <tr>
                            <td>disabled</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>Disables the upload functionality.</td>
                        </tr>
                        <tr>
                            <td>auto</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>When enabled, upload begins automatically after selection is completed.</td>
                        </tr>
                        <tr>
                            <td>maxFileSize</td>
                            <td>number</td>
                            <td>null</td>
                            <td>Maximum file size allowed in bytes.</td>
                        </tr>
                        <tr>
                            <td>invalidFileSizeMessageSummary</td>
                            <td>string</td>
                            <td>"&#123;0&#125;: Invalid file size, "</td>
                            <td>Summary message of the invalid fize size.</td>
                        </tr>
                        <tr>
                            <td>invalidFileSizeMessageDetail</td>
                            <td>string</td>
                            <td>"maximum upload size is &#123;0&#125;."</td>
                            <td>Detail message of the invalid fize size.</td>
                        </tr>
                        <tr>
                            <td>invalidFileTypeMessageSummary</td>
                            <td>string</td>
                            <td>"&#123;0&#125;: Invalid file type, "</td>
                            <td>Summary message of the invalid fize type.</td>
                        </tr>
                        <tr>
                            <td>invalidFileTypeMessageDetail</td>
                            <td>string</td>
                            <td>"allowed file types: &#123;0&#125;."</td>
                            <td>Detail message of the invalid fize type.</td>
                        </tr>
                        <tr>
                            <td>style</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Inline style of the component.</td>
                        </tr>
                        <tr>
                            <td>styleClass</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Style class of the component.</td>
                        </tr>
                        <tr>
                            <td>previewWidth</td>
                            <td>number</td>
                            <td>50</td>
                            <td>Width of the image thumbnail in pixels.</td>
                        </tr>
                        <tr>
                            <td>chooseLabel</td>
                            <td>string</td>
                            <td>Choose</td>
                            <td>Label of the choose button.</td>
                        </tr>
                        <tr>
                            <td>uploadLabel</td>
                            <td>string</td>
                            <td>Upload</td>
                            <td>Label of the upload button.</td>
                        </tr>
                        <tr>
                            <td>cancelLabel</td>
                            <td>string</td>
                            <td>Cancel</td>
                            <td>Label of the cancel button.</td>
                        </tr>
                        <tr>
                            <td>withCredentials</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>Cross-site Access-Control requests should be made using credentials such as cookies, authorization headers or TLS client certificates.</td>
                        </tr>
                        <tr>
                            <td>mode</td>
                            <td>string</td>
                            <td>advanced</td>
                            <td>Defines the UI of the component, possible values are "advanced" and "basic".</td>
                        </tr>
                        <tr>
                            <td>customUpload</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>Whether to use the default upload or a manual implementation defined in uploadHandler callback.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h3>Events</h3>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Parameters</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>onBeforeUpload</td>
                            <td>event.xhr: XmlHttpRequest instance. <br/>
                                event.formData: FormData object.</td>
                            <td>Callback to invoke before file upload begins to customize the request
                                such as post parameters before the files.</td>
                        </tr>
						<tr>
                            <td>onBeforeSend</td>
                            <td>event.xhr: XmlHttpRequest instance. <br/>
                                event.formData: FormData object.</td>
                            <td>Callback to invoke before file send begins to customize the request
                                such as adding headers.</td>
                        </tr>
                        <tr>
                            <td>onUpload</td>
                            <td>event.xhr: XmlHttpRequest instance.<br />
                                event.files: Uploaded files.</td>
                            <td>Callback to invoke when file upload is complete.</td>
                        </tr>
                        <tr>
                            <td>onError</td>
                            <td>event.xhr: XmlHttpRequest instance.<br />
                                event.files: Files that are not uploaded.</td>
                            <td>Callback to invoke if file upload fails.</td>
                        </tr>
                        <tr>
                            <td>onClear</td>
                            <td>-.</td>
                            <td>Callback to invoke when files in queue are removed without uploading using clear all button.</td>
                        </tr>
                        <tr>
                            <td>onRemove</td>
                            <td>event.originalEvent: Original browser event. <br />
                                event.file: Selected file.</td>
                            <td>Callback to invoke when a file is removed without uploading using clear button of a file.</td>
                        </tr>
                        <tr>
                            <td>onSelect</td>
                            <td>event.originalEvent: Original browser event. <br />
                                event.files: List of selected files.</td>
                            <td>Callback to invoke when files are selected.</td>
                        </tr>
                        <tr>
                            <td>uploadHandler</td>
                            <td>event.files: List of selected files.</td>
                            <td>Callback to invoke in custom upload mode to upload the files manually.</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            
            <h3>Methods</h3>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Parameters</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>upload</td>
                            <td>-</td>
                            <td>Uploads the selected files.</td>
                        </tr>
                        <tr>
                            <td>clear</td>
                            <td>-</td>
                            <td>Clears the files list.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h3>Styling</h3>
            <p>Following is the list of structural style classes, for theming classes visit <a href="#" [routerLink]="['/theming']">theming page</a>.</p>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Element</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>ui-fileupload</td>
                            <td>Container element</td>
                        </tr>
                        <tr>
                            <td>ui-fileupload-buttonbar</td>
                            <td>Header containing the buttons</td>
                        </tr>
                        <tr>
                            <td>ui-fileupload-content</td>
                            <td>Content section</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h3>Dependencies</h3>
            <p>None.</p>
        </p-tabPanel>

        <p-tabPanel header="Source">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/fileupload" class="btn-viewsource" target="_blank">
                <i class="fa fa-github"></i>
                <span>View on GitHub</span>
            </a>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-growl [value]="msgs"&gt;&lt;/p-growl&gt;
    
&lt;h3 class="first"&gt;Advanced&lt;/h3&gt;
&lt;p-fileUpload name="demo[]" url="./upload.php" (onUpload)="onUpload($event)" 
        multiple="multiple" accept="image/*" maxFileSize="1000000"&gt;
    &lt;ng-template pTemplate type="content"&gt;
        &lt;ul *ngIf="uploadedFiles.length"&gt;
            &lt;li *ngFor="let file of uploadedFiles"&gt;&#123;&#123;file.name&#125;&#125; - &#123;&#123;file.size&#125;&#125; bytes&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/ng-template&gt;        
&lt;/p-fileUpload&gt;

&lt;h3&gt;Basic&lt;/h3&gt;
&lt;p-fileUpload mode="basic" name="demo[]" url="./upload.php" accept="image/*" maxFileSize="1000000" (onUpload)="onBasicUpload($event)"&gt;&lt;/p-fileUpload&gt;

&lt;h3&gt;Basic with Auto&lt;/h3&gt;
&lt;p-fileUpload #fubauto mode="basic" name="demo[]" url="./upload.php" accept="image/*" maxFileSize="1000000" (onUpload)="onBasicUploadAuto($event)" auto="true" chooseLabel="Browse"&gt;&lt;/p-fileUpload&gt;
</code>
</pre>

<pre>
<code class="language-typescript" pCode ngNonBindable>
export class FileUploadDemo &#123;

    msgs: Message[];
    
    uploadedFiles: any[] = [];

    onUpload(event) &#123;
        for(let file of event.files) &#123;
            this.uploadedFiles.push(file);
        &#125;
    
        this.msgs = [];
        this.msgs.push(&#123;severity: 'info', summary: 'File Uploaded', detail: ''&#125;);
    &#125;
&#125;
</code>
</pre>
        </p-tabPanel>
    </p-tabView>
</div>
